<template>
  <el-container class="lowlevel-drives">
    <el-header style="height: 40px">
      <el-button :link="true" type="primary" @click="openDialog">
        添加
      </el-button>
    </el-header>
    <el-container>
      <el-main>
        <el-table :data="lowAPIDatas">
          <el-table-column type="expand">
            <template #default="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="函数名称 :">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="函数描述 :">
                  <span>{{ props.row.description }}</span>
                </el-form-item>
                <el-form-item label="输入 :">
                  <el-row v-for="item in props.row.input" :key="item.index">
                    <span>
                      {{ item.dataType ? item.dataType.name : ' ' }}
                      {{ item.name ? item.name : ' ' }}
                    </span>
                  </el-row>
                </el-form-item>
                <el-form-item label="输出 :">
                  <span>{{ props.row.output }}</span>
                </el-form-item>
                <el-form-item label="函数实现 :">
                  <span>{{ props.row.content }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="函数名称" prop="name"> </el-table-column>
          <el-table-column label="操作" width="120">
            <template v-slot="scope">
              <el-button
                @click="updateRow(scope.$index, scope.row)"
                :link="true"
                type="primary"
              >
                修改
              </el-button>
              <el-button
                @click="removeRow(scope.$index, scope.row)"
                :link="true"
                type="primary"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <WmcDialog
      title="添加底层API"
      :dialogVisible="dialogVisible"
      width="500px"
      @close="closeDialog"
      @handleConfirm="handleConfirm"
    >
      <template #form>
        <el-form
          :model="addLowLevelApi"
          ref="addOtherMacroRef"
          label-width="100px"
        >
          <el-form-item label="函数名称：" prop="name">
            <el-input v-model="addLowLevelApi.name"></el-input>
          </el-form-item>
          <el-form-item label="函数描述：" prop="description">
            <el-input v-model="addLowLevelApi.description"></el-input>
          </el-form-item>
          <el-form-item label="输入参数：">
            <template
              v-for="(inputItem, index) in addLowLevelApi.input"
              :key="index"
            >
              <el-col :span="10">
                <el-select v-model="inputItem.dataType">
                  <el-option
                    v-for="dataTypeItem in dataTypeList"
                    :key="dataTypeItem.value"
                    :value="dataTypeItem.value"
                  >
                    {{ dataTypeItem.label }}
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="1"> - </el-col>
              <el-col :span="8">
                <el-form-item>
                  <el-input v-model="inputItem.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-button @click="deleteInput(index)">删除</el-button>
              </el-col>
            </template>
          </el-form-item>
          <el-form-item label="输出类型">
            <el-input v-model="addLowLevelApi.output"></el-input>
          </el-form-item>
          <el-form-item label="函数实现">
            <el-input
              type="textarea"
              autosize
              v-model="addLowLevelApi.content"
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #btn>
        <el-button type="primary" @click="addInput">新增输入参数</el-button>
      </template>
    </WmcDialog>
  </el-container>
</template>

<script lang="ts">
import { ILowApiData } from '@/render/store/drives/types'
import { defineComponent, PropType, ref, watch } from 'vue'
import { addLowLevelDrivesConfig } from './config/add-lowlevel-drives.config'
import WmcDialog from '@/render/base-ui/dialog'
import emitter from '@/render/utils/mitt'

export default defineComponent({
  components: { WmcDialog },
  props: {
    modelValue: {
      type: Array as PropType<ILowApiData[]>,
      default: () => []
    },
    dataTypes: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    let rowIndex = -1
    const lowAPIDatas = ref(props.modelValue)
    const addLowLevelApiDefault = {
      name: ''
    }
    const addLowLevelApi = ref()
    const dialogVisible = ref(false)
    const addOtherMacroRef = ref()
    const dataTypeList = props.dataTypes.map((item: any) => {
      return {
        label: item.name,
        value: item.name
      }
    })
    watch(
      lowAPIDatas,
      (n) => {
        emit('update:modelValue', n)
        emitter.emit('update-tab', 'emitter')
      },
      {
        deep: true
      }
    )

    const updateRow = (index: number, row: any) => {
      dialogVisible.value = true
      addLowLevelApi.value = JSON.parse(JSON.stringify(row))
      rowIndex = index
    }
    const removeRow = (index: number, row: any) => {
      if (index !== -1) {
        lowAPIDatas.value.splice(index, 1)
      }
    }
    const openDialog = () => {
      dialogVisible.value = true
      addLowLevelApi.value = JSON.parse(JSON.stringify(addLowLevelApiDefault))
      rowIndex = -1
    }
    const closeDialog = () => {
      dialogVisible.value = false
    }
    const handleConfirm = () => {
      dialogVisible.value = false
      if (rowIndex === -1) {
        lowAPIDatas.value.push(addLowLevelApi.value)
      } else {
        lowAPIDatas.value[rowIndex] = JSON.parse(
          JSON.stringify(addLowLevelApi.value)
        )
      }
    }
    const addInput = () => {
      if (addLowLevelApi.value.input == null) {
        addLowLevelApi.value.input = []
      }
      addLowLevelApi.value.input.push({
        dataType: '',
        name: ''
      })
    }

    const deleteInput = (index: number) => {
      if (index !== -1) {
        addLowLevelApi.value.input.splice(index, 1)
      }
    }

    return {
      dataTypeList,
      lowAPIDatas,
      dialogVisible,
      addLowLevelApi,
      addOtherMacroRef,
      addLowLevelDrivesConfig,
      openDialog,
      closeDialog,
      handleConfirm,
      updateRow,
      removeRow,
      addInput,
      deleteInput
    }
  }
})
</script>

<style scoped lang="less">
.lowlevel-drives {
  & > .el-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: rgb(238, 241, 246);
  }
  & > .el-container {
    padding: 0;
    .el-aside {
      width: 240px;
      margin-right: 10px;
      overflow: hidden;
      li {
        cursor: pointer;
        padding: 8px;
      }
      li + li {
        border-top: 1px solid #dedfe0;
      }
      li:hover {
        color: #409eff;
      }
    }
    .el-main {
      padding: 0;
    }
  }
}
.demo-table-expand {
  font-size: 0;
  margin-left: 60px;
}
.demo-table-expand label {
  width: 110px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
